
<template>

  <div>
    <div  style="background-color: #f1f2f5; width: 100%; height: 1250px;">

      <div style="background-color: #f1f2f5; width: 100%; height: 30px;"></div>

      <div style="background-color: #fdfdfd; width: 1200px; height: 110px; margin: 0 auto;">

        <div style="display: flex; align-items: center; margin-bottom: 10px;justify-content: center;">
          <el-row style=" margin-top: 20px;">

            <span style=" font-size: 14px; margin-right: 15px;">订单编号：</span>
            <span style=" font-size: 14px;  width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.order_id }}</span>

            <span style=" font-size: 14px; margin-right: 15px;">运单编号：</span>
            <span style=" font-size: 14px;  width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.id }}</span>

            <span style=" font-size: 14px; margin-right: 15px;">下单时间：</span>
            <span style=" font-size: 14px;  width: 200px; color: #bbbbbb; margin-right: 300px;">{{ TransportVo.orderVo.createTime }}</span>

          </el-row>
        </div>

        <div style="display: flex; align-items: center; margin-bottom: 10px;justify-content: center;">
          <el-row style=" margin-top: 10px;">
            <span style=" font-size: 14px; margin-right: 15px;">订单状态：</span>
            <span style=" font-size: 14px;  width: 200px; margin-right: 305px; color: #bbbbbb">{{ TransportVo.orderVo.status | ConvertOrderStatus }}</span>

            <span style=" font-size: 14px; margin-right: 15px;">预计到达时间：</span>
            <span style=" font-size: 14px;  width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.orderVo.estimatedArrivalTime }}</span>

            <span style="padding-right: 210px;">&nbsp;</span>
          </el-row>
        </div>

      </div>

      <div style="background-color: #f1f2f5; width: 100%; height: 10px;"></div>

      <el-collapse v-model="activeNames" @change="handleChange" style="overflow: auto;">
        <div style="margin: 10px; padding: 10px; width: 1200px; margin-left: auto; margin-right: auto; text-align: left;">
          <el-collapse-item name="1">
            <template slot="title">
              <span style="font-weight: bold; font-size: 16px; margin-left: 30px;">基本信息</span>
            </template>
            <div style=" margin-top: 20px;">
              <span style="margin-left: 50px; font-size: 14px;">发货方</span>
              <el-row style=" margin-top: 10px;">

                <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">发货方姓名：</span>
                <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.orderVo.senderName }}</span>

                <span style=" font-size: 14px; margin-right: 15px; margin-left: 90px;">发货方地址：</span>
                <span style=" font-size: 14px; width: 200px; margin-right: 150px; color: #bbbbbb">{{ TransportVo.orderVo.senderProvinceName }} {{ TransportVo.orderVo.senderCityName }} {{ TransportVo.orderVo.senderCountyName }}</span>


              </el-row>

              <el-row style=" margin-top: 10px;">

                <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">发货方电话：</span>
                <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.orderVo.senderPhone }}</span>

                <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">详细地址：</span>
                <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.orderVo.senderAddress }}</span>


              </el-row>
            </div>

            <div style=" margin-top: 20px;">
              <span style="margin-left: 50px; font-size: 14px;">收货方</span>
              <el-row style=" margin-top: 10px;">

                <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">收货方姓名：</span>
                <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.orderVo.receiverName }}</span>

                <span style=" font-size: 14px; margin-right: 15px; margin-left: 110px;">收货方地址：</span>
                <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.orderVo.receiverProvinceName }} {{ TransportVo.orderVo.receiverCityName }} {{ TransportVo.orderVo.receiverCountyName }}</span>


              </el-row>

              <el-row style=" margin-top: 10px;">

                <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">收货方电话：</span>
                <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.orderVo.receiverPhone }}</span>

                <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">详细地址：</span>
                <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.orderVo.receiverAddress }}</span>


              </el-row>
            </div>

            <div style=" margin-top: 20px;">
              <span style="margin-left: 50px; font-size: 14px;">距离: </span>
              <span style="margin-left: 20px; font-size: 14px; ">{{ TransportVo.orderVo.distance }} km</span>

              <span style="margin-left: 100px; font-size: 14px;">地图: </span>
              <el-button style="margin-left: 20px;" type="text" @click="ViewMapClickEvents">查看地图</el-button>

              <el-dialog
                title="地图查看"
                :visible.sync="dialogVisible"
                width="80%"
                :before-close="handleClose">
                <!--                    <div style="background-color: #f1f2f5; height: 600px;"></div>-->
                <div>
                  <div id="container"></div>
                  <div id="panel"></div>
                </div>

              </el-dialog>
            </div>
          </el-collapse-item>
        </div>

        <div style="margin: 10px; padding: 10px; width: 1200px; margin-left: auto; margin-right: auto;">
          <el-collapse-item name="2">
            <template slot="title">
              <span style="font-weight: bold; font-size: 16px; margin-left: 30px;">费用信息</span>
            </template>
            <div>
              <div style=" margin-top: 20px;">
                <el-row style=" margin-top: 10px;">

                  <span style="margin-left: 50px; font-size: 14px; margin-right: 15px;">运费：</span>
                  <span style=" font-size: 16px; margin-right: 15px;width: 200px; font-weight: bold; color: #ffb902">{{TransportVo.orderVo.amount}}</span>
                  <span style=" font-size: 14px; margin-right: 200px; color: #bbbbbb">元</span>

                  <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">支付方式：</span>
                  <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.orderVo.paymentMethod | ConvertPaymentMethods }}</span>

                  <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">付款状态：</span>
                  <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.orderVo.paymentStatus | ConvertPaymentStatus}}</span>
                </el-row>

              </div>


            </div>

          </el-collapse-item>
        </div>

        <div style="margin: 10px; padding: 10px; width: 1200px; margin-left: auto; margin-right: auto;">
          <el-collapse-item name="3">
            <template slot="title">
              <span style="font-weight: bold; font-size: 16px; margin-left: 30px;">货品信息</span>
            </template>
            <div style="margin-left: 50px; width: 1100px; display: inline-block; text-align: left;">
              <el-table
                :data="CargoList"
                height="200"
                stripe
                style="width: 100%;">
                <el-table-column
                  prop="name"
                  label="货物名称"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="quantity"
                  label="货品数量"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="goodsTypeId"
                  label="货物类型ID"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="weight"
                  label="货品重量"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="volume"
                  label="货品体积"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="totalWeight"
                  label="货品总重量"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="totalVolume"
                  label="货品总体积"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="cargoBarcode"
                  label="货品条码"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="remark"
                  label="货品备注"
                  width="180">
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
        </div>

        <div style="margin: 10px; padding: 10px; width: 1200px; margin-left: auto; margin-right: auto;">
          <el-collapse-item name="4">
            <template slot="title">
              <span style="font-weight: bold; font-size: 16px; margin-left: 30px;">取件信息</span>
            </template>
            <div>
              <div style=" margin-top: 20px;">
                <el-row style="margin-left: 50px; margin-top: 10px;">

                  <span style=" font-size: 14px;">所在网点：</span>
                  <span style=" font-size: 14px; width: 150px; margin-right: 100px; color: #bbbbbb">新惠镇网点</span>


                  <span style=" font-size: 14px; margin-left: 30px;">取件类型：</span>
                  <span style=" font-size: 14px; width: 150px; margin-right: 100px; color: #bbbbbb">预结</span>

                  <span style=" font-size: 14px;margin-left: 30px;">作业状态：</span>
                  <span style=" font-size: 14px; width: 150px; margin-right: 100px; color: #bbbbbb">未付款</span>

                  <span style=" font-size: 14px;margin-left: 30px;">取件快递员：</span>
                  <span style=" font-size: 14px; width: 150px; margin-right: 230px; color: #bbbbbb">未付款</span>
                </el-row>

                <el-row style="margin-left: 50px; margin-top: 10px;">

                  <span style=" font-size: 14px;" >快递员电话：</span>
                  <span style=" font-size: 14px; width: 150px; margin-right: 30px; color: #bbbbbb">12000000004</span>

                  <span style=" font-size: 14px; margin-left: 30px;">预计取件时间：</span>
                  <span style=" font-size: 14px; width: 150px; margin-right: 30px; color: #bbbbbb">2021-12-09 18:50:57</span>

                  <span style=" font-size: 14px; margin-left: 30px;">取件完成时间：</span>
                  <span style=" font-size: 14px; width: 150px; margin-right: 30px; color: #bbbbbb">2021-12-09 18:50:57</span>

                  <span style=" font-size: 14px;margin-left: 30px;">实际取件时间：</span>
                  <span style=" font-size: 14px; width: 150px; margin-right: 30px; color: #bbbbbb">2021-12-09 18:50:57</span>
                </el-row>
              </div>
            </div>

          </el-collapse-item>
        </div>
      </el-collapse>


    </div>
  </div>

</template>

<style scoped lang="scss">

</style>
<script>

import {
  ObtainWaybillDetailsBasedOnId,
  QueryAllWaybillDataWithConditions,
} from "../../api/waybill/waybill";
import {handleAllProvinces, handleCityChange, handleProvinceChange} from "../../api/order/order";

// 添加高德安全密钥
window._AMapSecurityConfig = {
  securityJsCode: "e20a12abcb1fab184da9574c7eaee0b9"
};
export default {
  name: 'app',
  props: {
    id: ''
  },
  //name: "article-page",
  data() {
    return {
      dialogVisible: false,//查看地图弹框
      activeNames: ['1', '2', '3', '4'],//运单详情信息折叠板

      CargoList: [],//货品信息集合


      TransportStatus: [
        {
          value: '1',
          label: '新建'
        }, {
          value: '2',
          label: '已装车'
        }, {
          value: '3',
          label: '到达'
        }, {
          value: '4',
          label: '到达终端网点'
        }, {
          value: '5',
          label: '已签收'
        }, {
          value: '6',
          label: '拒收'
        }],//运单状态下拉框
      SchedulingStatus: [
        {
          value: '1',
          label: '待调度'
        }, {
          value: '2',
          label: '未匹配路线'
        }, {
          value: '3',
          label: '已调度'
        }],//运单调度状态下拉框

      TransportDto: {//运单查询条件
        id: '',//运单id查询条件
        status : '',//运单状态查询条件
        schedulingStatus: '',//调度状态
        senderName: '',//发件人姓名查询条件
        senderPhone: '',//发件人电话查询条件
        senderProvinceId: '',//发件人省份查询条件
        senderCityId: '',//发件人城市查询条件
        senderDistrictId: '',//发件人区县查询条件
        receiverName: '',//收件人姓名查询条件
        receiverPhone: '',//收件人电话查询条件
        receiverProvinceId: '',//收件人省份查询条件
        receiverCityId: '',//收件人城市查询条件
        receiverDistrictId: '',//收件人区县查询条件
      },
      TransportVo:[]
    };
  },
  filters: {

    //转换付款方式
    ConvertPaymentMethods(value) {
      switch (value) {
        case 1:
          return '预结';
        case 2:
          return '到付';
        default:
          return '其他';
      }
    },
    //转换付款状态
    ConvertPaymentStatus(value) {
      switch (value) {
        case 1:
          return '未付';
        case 2:
          return '已付';
        default:
          return '其他';
      }
    },
    //转换订单状态
    ConvertOrderStatus(value) {
      switch (value) {
        case 1:
          return '待取件';
        case 2:
          return '已取件';
        case 3:
          return '网点自寄';
        case 4:
          return '网点入库';
        case 5:
          return '待装车';
        case 6:
          return '运输中';
        case 7:
          return '网点出库';
        case 8:
          return '待派送';
        case 9:
          return '派送中';
        case 10:
          return '签收';
        case 11:
          return '拒收';
        case 12:
          return '已取消';
        default:
          return '其他状态';
      }
    }
  },
  methods: {

    initMap() {

      console.log('initMap 方法被调用');
      if (typeof AMap === 'undefined') {
        console.error('高德地图API未加载');
        return;
      }

      const map = new AMap.Map("container", {
        resizeEnable: false,
        center: [116.397428, 39.90923],
        zoom: 13
      });

      const receiverAddress = this.TransportVo.orderVo.receiverAddress;
      const receiverCityName = this.TransportVo.orderVo.receiverCityName;

      const senderAddress = this.TransportVo.orderVo.senderAddress;
      const senderCityName = this.TransportVo.orderVo.senderCityName;

      AMap.plugin(['AMap.Driving'], function() {
        const driving = new AMap.Driving({
          map: map,
          panel: 'panel'
        });

        driving.search([
          { keyword: senderAddress, city: senderCityName },
          { keyword: receiverAddress, city: receiverCityName }

        ], function(status, result) {
          if (status === 'complete') {
            console.log('绘制驾车路线完成');
          } else {
            console.error('获取驾车数据失败：' + result);
          }
        });
      });
    },
    remoteLoad(url, callback) {
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = url;

      if (script.readyState) {  // For IE
        script.onreadystatechange = function() {
          if (script.readyState === 'loaded' || script.readyState === 'complete') {
            script.onreadystatechange = null;
            callback();
          }
        };
      } else {  // For other browsers
        script.onload = function() {
          callback();
        };
      }

      document.body.appendChild(script);
    },
    //查看地图点击事件
    ViewMapClickEvents(){
      // Define the initMap callback function before loading JsApi
      window.initMap = () => {
        this.initMap(); // Call the initMap method when JsApi is loaded
      };

      // Call the remoteLoad function here
      this.remoteLoad('https://webapi.amap.com/maps?v=1.4.15&key=0c069d624168ea56415191392161489c&callback=initMap', () => {
        // Callback function after script is loaded
        console.log('高德地图API加载完成');
      });
      this.dialogVisible = true;
    },
    handleClose() {//关闭查看地图方法
      this.dialogVisible = false; // 关闭对话框

      /*      this.$confirm('确认关闭？')
                .then(() => {
                  // 在这里执行关闭对话框的操作
                })
                .catch(() => {
                  // 用户取消关闭操作时的处理
                });*/
    },


    handleChange(val) {
      console.log("折叠板========"+val);
    },


  },


  async created() {

    //根据订单id查订单详情
    ObtainWaybillDetailsBasedOnId(this.id).then(response =>{
      this.TransportVo = response
      this.CargoList = response.orderVo.orderCargo
      console.log("查到的运单信息====" + response.id);
      console.log(this.TransportVo);
    })

  }

};

</script>
